<template>

	<view class="content some-class pb100">
		<view class="banner">
			<u-swiper :height="200" :list="news.coverPicList" @click="click"></u-swiper>
			<view class="mtsd">即将开始</view>
		</view>
		<view class="title">
			{{news.title}}
		</view>
		<view class="row1">
			<view class="ul">
				<view class="li">
					<view class="span">
						<view class="stb">
							{{news.startingPrice}}
						</view>
						<view class="p">
							起拍价
						</view>
					</view>
					<view class="span">
						<view class="stb">
							{{news.houseType}}
						</view>
						<view class="p">
							房型
						</view>
					</view>
					<view class="span">
						<view class="stb">
							{{news.area}}m²
						</view>
						<view class="p">
							建筑面积
						</view>
					</view>
				</view>
				<view class="li1">
					<view class="span">
						<text class="tx">市场价</text> {{news.marketPrice}}万
					</view>
					<view class="span">
						<text class="tx">捡漏空间 </text> {{news.pickupSpacePrice}}万
					</view>
				</view>
				<view class="li1">
					<view class="span">
						<text class="tx">市场单价 </text> {{news.marketUnitPrice}}万
					</view>
					<view class="span">
						<text class="vb tx">起拍单价 </text>
						<text class="red" v-if="news.startingOddPrice == 'null'">联系管理员处理</text> <text
							v-else>{{news.startingOddPrice}}万</text>
					</view>
				</view>
			</view>

		</view>
		<view class="rowfwbox">
			<view class="pmsjcjjg">

				<view class="p">
					拍卖时间：{{news.auctionTime}}
				</view>
			</view>
			<view class="text">
				标的物详情以法院拍卖公告为准
			</view>
		</view>
		<view class="row2">
			<view class="ul">
				<view class="li">
					<view class="span">
						<text class="vb">小区名称</text>{{news.cellName}}
					</view>
				</view>
				<view class="li">
					<view class="span">
						<text class="vb">房屋户型</text>{{news.houseType}}
					</view>
				</view>
				<view class="li">
					<view class="span">
						<text class="vb">梯步</text>{{news.step}}
					</view>
					<view class="span">
						<text class="vb">楼层 </text><text v-if="news.floor">{{news.floor}}</text>
					</view>
				</view>

				<view class="li">
					<view class="span">
						<text class="vb">物业类型</text>{{news.propertyType}}
					</view>
					<view class="span">
						<text class="vb">拍卖次数 </text>{{news.numberOfAuctions}}
					</view>
				</view>
				<view class="li">
					<view class="span">
						<text class="vb">保证金 </text>{{news.earnestMoney}}万
					</view>
					<view class="span">
						<text class="vb">加价幅度 </text> {{news.bidIncrement}}万
					</view>
				</view>
				<view class="li">
					<view class="span">
						<text class="vb">折扣率</text>{{news.discountRate}}%
					</view>
					<view class="span">
						<text class="vb">捡漏空间 </text> {{news.pickupSpacePrice}}万
					</view>
				</view>
				<view class="li">
					<view class="span">
						<text class="vb">建筑年份</text>
						{{news.architectureYear !='null'?news.architectureYear:'--'}}
					</view>
					<view class="span">
						<text class="vb">装修情况 </text>{{news.decorateSituation}}
					</view>
				</view>
				<view class="li">
					<view class="span">
						<text class="vb">省市区 </text>{{news.address}}
					</view>

				</view>
			</view>

		</view>

		<view class="row3">
			<view class="dt">
				楼盘位置
			</view>

			<view class="map">
				<view @tap="chakanweizhi(news.latitude,news.longitude)" class="fibox">

				</view>
				<map id="map" class="map" :latitude="news.latitude" :markers="covers" :scale="scale"
					:longitude="news.longitude"></map>
				<!-- <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"> -->
				</map>
			</view>
		</view>
		<view :class="'row4 '+ [isAllScreen ? 'all-screen-bar' : 'normal-bar']">
			<view class="dt">
				图片详情
			</view>
			<image mode="widthFix" v-for="(item,index) in news.detailList" :key="index" :src="item"
				@click="clickimgtc(index)"></image>
		</view>
		<view :class="'ddhfix some-class '+ [isAllScreen ? 'all-screen-bar' : 'normal-bar']">
			<view class="views">
				<image :src="ulr+'/minis/home/kf.jpg'"></image>
				<view class="p">
					平台客服
				</view>
			</view>
			<view class="views">

			</view>
			<u-button :ripple="true" @click="callPhone" type="primary" size="medium">拨打电话</u-button>
			<view class="zwf"></view>

		</view>

	</view>

</template>

<script>
	import {
		housinginfo
	} from '../../api/index.js'
	import config from '@/common/config'
	import share from '@/components/lj-share/wxShare'
	import {
		getDictDataByParam
	} from '../../api/dict.js'
	import col from '../../uni_modules/uview-ui/libs/config/props/col.js'
	export default {
		data() {
			return {
				news: {},
				ulr: config.baseImgUrl,
				imglisit: [],
				mixins: [share],
				scale: 14,
				isAllScreen: config.isAllScreen,
				marks: [],
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				agentMobile: '',
				mobile: '',
				housingSourceId: null,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
				}],
				isFromShare: false
			};
		},
		onLoad(option) {
			console.log(option)
			this.getDetail(option.id)
			this.housingSourceId = option.id
			if (option.scene) {
				this.mobile = option.scene
				this.agentMobile = ''
				this.isFromShare = true
			} else {
				// 每次显示页面时重新获取手机号
				let userinfo = uni.getStorageSync('userInfo')
				if (userinfo && userinfo.mobile) {
					this.mobile = userinfo.mobile
				}
			}
		},
		onShow() {
			// 每次显示页面时重新获取手机号
			// let userinfo = uni.getStorageSync('userInfo')
			// if (userinfo && userinfo.mobile) {
			// 	this.mobile = userinfo.mobile
			// }
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);

			// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					//console.log('initMarkerCluster', res)
				}
			});
			this._mapContext.on("markerClusterCreate", (e) => {
				//console.log("markerClusterCreate", e);
			});
		},
		methods: {
			async onShareAppMessage() {
				this.share.path = '/pages/index/fangwuDetail?id=' + this.housingSourceId + '&scene=';
				let userinfo = uni.getStorageSync('userInfo')
				if (userinfo) {
					await getDictDataByParam({
						dictType: 'share_personnel',
						status: 0
					}).then(res => {
						let dictInfoList = res.data;
						if (dictInfoList) {
							for (let dict of dictInfoList) {
								if (dict.value === userinfo.mobile) {
									this.share.path = '/pages/index/fangwuDetail?id=' + this.housingSourceId +
										'&scene=' + userinfo.mobile;
									this.share.title = this.news.title || '';
									this.share.imageUrl = this.news.backgroundPic || '';
									break;
								}
							}
						}
					})
				}
				console.log(this.share.path)
				return {
					title: this.news.title,
					path: this.share.path + (this.share.parameter ? '?' + this.share.parameter : ''),
					imageUrl: this.share.imageUrl,
					success: function(res) {
						// 转发成功
					},
					fail: function(err) {
						// 转发失败  
					}
				}
			},
			clickimgtc(index) {
				uni.previewImage({
					urls: this.news.detailList,
					current: index,
				});
			},
			callPhone() {
				console.log("当前手机号:", this.mobile)
				console.log("当前手机号agentMobile:", this.agentMobile)
				if (this.agentMobile) {
					wx.makePhoneCall({
						phoneNumber: this.agentMobile,
					});
				} else {
					wx.makePhoneCall({
						phoneNumber: this.mobile,
					});
				}
			},
			getDetail(id) {
				housinginfo({
					id: id
				}).then(res => {
					this.news = res.data
					this.share.title = res.data.cellName
					this.share.imageUrl = res.data.backgroundPic
					// 只有不是从分享进入时才设置 agentMobile
					if (!this.isFromShare) {
						this.agentMobile = res.data.serviceTel
					}
					var newData = [{
						latitude: res.data.latitude,
						longitude: res.data.longitude,
					}, ];
					this.covers = newData
				})
			},
			chakanweizhi(lat, lng) {
				console.log(lat + ',' + lng)
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lng),
					success: function() {
						//console.log('success');
					}
				});
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			}
		},
		//时间戳转换
		getTime(time) {
			let data = new Date(time);
			let year = data.getFullYear();
			let month = data.getMonth() + 1;
			let day = data.getDate();
			let h = data.getHours();
			let mm = data.getMinutes();
			let s = data.getSeconds();
			month = month >= 10 ? month : "0" + month;
			day = day >= 10 ? day : "0" + day;
			h = h >= 10 ? h : "0" + h;
			mm = mm >= 10 ? mm : "0" + mm;
			s = s >= 10 ? s : "0" + s;
			return `${year}-${month}-${day} ${h}:${mm}:${s}`;
		},
	}
</script>

<style lang="scss">
	.title {
		margin: 20rpx 0;
		font-size: 32rpx;
		font-weight: bold;
	}

	.all-screen-bar {
		padding-bottom: 40rpx;
	}

	.normal-bar {
		padding-bottom: 0;
	}

	.some-class {
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS 11.2+ */
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS 11.0-11.1.2 */
	}

	.zwf {
		width: 30rpx;
	}

	.ddhfix {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		display: flex;
		padding-top: 20rpx;
		align-items: center;
		box-shadow: 1px 1px 2px #000;

		.views {
			width: 300rpx;
			margin: 0 20rpx;
			text-align: center;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 10rpx;
		}
	}

	.red {
		color: red;
	}

	.pb100 {
		padding-bottom: 130rpx;
	}

	.rowfwbox .pmsjcjjg {
		background-color: rgb(245, 246, 250);
		margin-bottom: 20rpx;
		line-height: 40rpx;
		text-indent: 20rpx;
	}

	.pmsjcjjg .dt {
		font-size: 16px;
		color: rgb(71, 108, 200);
		line-height: 60rpx;
	}

	.pmsjcjjg .p {
		font-size: 14px;
		color: #666;
		line-height: 50rpx;
		text-indent: 20rpx;
	}

	.rowfwbox .text {
		color: #F44336;
		background-color: rgb(245, 240, 235);
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 14px;
	}

	.banner {
		position: relative;

		.mtsd {
			position: absolute;
			padding: 10rpx 15rpx;
			font-size: 32rpx;
			background-color: #2979ff;
			color: #fff;
			border-radius: 10rpx;
			top: 15rpx;
			left: 15rpx;
		}
	}

	.map {
		display: flex;
		margin: 30rpx 0;
		position: relative;
	}

	.fibox {
		position: absolute;
		z-index: 9;
		width: 100%;
		height: 100%;
	}

	.row4 {
		margin-bottom: 80px;
	}

	.row4 .dt {
		margin-bottom: 30rpx;
	}

	.row4 image {
		width: 100%;
	}

	#map {
		flex: 1;
	}

	.ul .li {
		color: #666;
		font-size: 14px;
		display: flex;
		width: 100%;
		justify-content: space-around;
		text-align: center;
	}

	.ul .li1 {
		color: #666;
		font-size: 14px;
		display: flex;
		width: 100%;
		justify-content: space-around;
		text-align: center;
	}

	.ul .li .span .stb {
		color: rgb(253, 53, 11);
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 5rpx;
	}

	.content {
		padding: 30rpx;

		.image {
			width: 100%;
		}

		.mgbt {
			margin-bottom: 40rpx;
		}

		.row2 {
			margin: 20rpx 0;
		}

		.row1 .li {
			margin: 20rpx 0;
		}

		.row1 .li1 {
			font-size: 15px;
			line-height: 40rpx;
			margin: 20rpx 0;
		}

		.row1 .li1 .span {
			color: #000;
			display: flex;
		}

		.row1 .li1 .text {
			color: #666;
			margin-right: 15rpx;
		}

		.row1 .li1 .span {
			text-align: right;
			display: block;
			width: 35%;
		}

		.row1 .li1 .span:nth-child(2n) {
			text-align: left;
		}

		.row2 .li {
			display: flex;
			margin: 20rpx 0;
			justify-content: left;
		}

		.row2 .li:nth-child(1) .span {
			width: 100%;
		}

		.row2 .li .span {
			width: 50%;
			line-height: 40rpx;
			font-size: 15px;
			display: block;
			color: #000;
			float: left;
			text-align: left;
			font-weight: 500;
			flex: 1;
		}

		.row2 .li .span .vb {
			display: inline-block;
			width: 150rpx;
			text-align: right;
			line-height: 42rpx;
			color: #888585;
			margin-right: 10rpx;
		}

		.row2 .li:nth-child(9) .span {
			width: 100%;
		}

		.row2 .li:nth-child(2) .span {
			width: 100%;
		}
	}

	.tx {
		color: #8a8888;
		margin-right: 5px;
	}

	.dt {
		font-weight: 500;
	}
</style>